▉ 前言

這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !

系統提示：「Success grows out of struggles to overcome difficulties.」，PixiJS青銅玩家完成gameLoop()階段的所有任務，獲得一條項鍊。

▉ 主線任務：play( )：一些初始設置

▍任務說明

在play()函式的剛開始，先寫一些基本的設置。那這些設置的目的在於，使explorer（探險家）可以移動，以及將explorer給限制在地牢這張圖片之中，不讓他們移動到地牢邊界之外。

▍作法

explorer.x += explorer.vx;
explorer.y += explorer.vy;

contain(explorer, {x: 28, y: 10, width: 488, height: 480});

let explorerHit = false;

▍分析

在【LV. 15】中提到了鍵盤偵測，也就是當玩家按下「上、下、左、右」鍵時，explorer的X或Y軸速度將會被賦予一個值。

而這裡便是將那個速度的值，加上explorer的初始位置，讓explore能走動。

explorer.x += explorer.vx;
explorer.y += explorer.vy;

接著會看到一個函式contain()，他並不是PIXI中的函式，跟之前的keyboard()函式一樣，都是我們必須自定義的函式，至於他的程式碼可以先參考官方教程的，程式碼的分析會放在最後寫，這裡主要先整理contain()的作用。

• 功能：contain()這個函式的功能在於給一個限制，讓explorer的行動有個範圍限制。
• 使用說明：contain()可以放入兩個參數，第一個參數是放入你想限制住的Sprite（例如在這張地圖中的explorer或是blobs），第二個則是一個有點類似製作矩形的作法，給予x,y,width,height，設置好後等於定義了一個矩形區域範圍，第一個參數的Sprite將不能超出這個範圍外。

contain(explorer, {x: 28, y: 10, width: 488, height: 480});

範圍如下圖：

最後一個初始設置，是在碰撞發生之前，我們先將一個變數叫做「explorerHit」設置為false（i.e.當碰撞發生，則explorerHit將被設置為true）

let explorerHit = false;

▉ 結語

今天仍在外縣市中...本來應該繼續把泡泡怪們的移動給一起寫的，但是時間上關係，不希望趕著把它給完成QQ所以今天內容一樣極少。

總之，Day17的內容在於一些基本的設置，尤其是contain()的自定義函式的概念（知道怎麼使用這個函式，至於程式碼該如何完成，會再之後說明），明天將進入泡泡怪的移動進行。

參考資料

• PixiJS 教程中文版